import React, { PureComponent, Fragment } from 'react'
import { BackTop, Icon } from 'antd'
import { connect } from 'react-redux'
import { actionCreater } from './store'
import Header from '../../common/header'
import { Link } from 'react-router-dom'
import ContentList from '../../common/contentList'
import {RemmendWrapper, RemmendLeft, RemmendRight, Title, Nav } from './style.js'
class Remmend extends PureComponent{
 componentDidMount(){
     this.props.getRemendData()
 }
    render(){
        const { title, nav, notice1, notice2, list, list2, writerList, focusList, handleClose, handleOpen, load, load2, 
            handleOpenClick, handleCloseClick, handleModal }= this.props;
        return(
            <Fragment>
               <Header></Header>
               <RemmendWrapper>
                  <RemmendLeft>
                    <Title>
                        <img alt= '' className= 'title-img' src= "//upload.jianshu.io/collections/images/95/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" />
                     
                          <Link to= '/'>
                            <div className= 'name'>{title.get('name')}</div>
                          </Link>
                          <div className= 'info'>收录了{title.get('info1')}篇文章 · {title.get('info2')}人关注</div>
                        
                        <div className= 'common'>
                          <span className= 'avatar-collection'>{title.get('collection')}</span>
                          <span className= 'btn-success'><Icon type="plus" theme="outlined" />{title.get('btn')}</span>
                        </div>
                    </Title>
                    <Nav>
                        <Link to= '/'>
                           
                            <span className= 'discuss'> <Icon className= 'icon' type="wechat" theme="outlined" />{nav.get('discuss')}</span>
                        </Link>
                        <Link to= '/'>
                            
                            <span className= 'active  selected'><Icon className= 'icon' type="file-text" theme="outlined" />{nav.get('active')}</span>
                        </Link>
                        <Link to= '/'>
                            
                            <span className= 'hot'><Icon className= 'icon' type="fire" theme="outlined" />{nav.get('hot')}</span>
                        </Link>
                    </Nav>
                    <ContentList></ContentList>
                  </RemmendLeft>
                  <RemmendRight>
                      
                          
                      
                     
                     {
                         load ? 
                         <div className= 'aside'>
                            <div className= 'notice'>{ notice1.get('name')}</div> 
                            <p>{notice1.get('p1')}</p>
                            <p>{notice1.get('p2')}</p>
                    

                            <p>{notice1.get('p3')}</p>
                            <p>{notice1.get('p4')}
                                
                            <br/>
                                <a href= "http://www.jianshu.com/p/9da8500a57f0">{notice1.get('p5')}</a>
                            </p>
                            <p>{notice1.get('p6')}</p>
                            <p>{notice1.get('p7')}</p>
                            <p>{notice1.get('p8')}</p>
                           
                           <div className= 'open' onClick= { handleOpen }>{notice1.get('p9')} <Icon type="down" theme="outlined" /></div>
                         </div>:

                         <div className= 'aside'>
                            <div className= 'notice'>{notice2.get('name')}</div> 
                            <p>{notice2.get('p1')}</p>
                            <p>{notice2.get('p2')}</p>
                    
                        

                            <p>{notice2.get('p3')}</p>
                            <p>{notice2.get('p4')}
                                
                            <br/>
                                <a href= "http://www.jianshu.com/p/9da8500a57f0">{notice2.get('p5')}</a>
                            </p>
                            <p>{notice2.get('p6')}</p>
                            <p>{notice2.get('p7')}</p>
                            <p>{notice2.get('p8')}</p>
                            <p>{notice2.get('p9')}</p>
                            <p>{notice2.get('p10')}</p>
                            <p>{notice2.get('p11')} 
                                <br/>
                                <a href= "https://www.jianshu.com/u/021585ebd561">{notice2.get('p12')}</a>
                            </p>
                            <p> {notice2.get('p13')}</p>
                            <p>{notice2.get('p14')}</p>
                            <p>{notice2.get('p15')}</p>

                            <div className= 'open' onClick= { handleClose }>{notice2.get('p16')} <Icon type="up" theme="outlined" /></div>
                     
                         </div>    

                       }
                     
                     <div className= 'share'>
                        <span className= 'share1'>分享到</span>
                        <Link to= '/'>
                           <Icon className= 'share2' type="weibo" theme="outlined" /> 
                        </Link>
                        <Link to= '/'>
                           <Icon className= 'share2' type="wechat" theme="outlined" />
                        </Link>
                        <Link to= '/'>
                           <Icon className= 'share2' type="ellipsis" theme="outlined" />
                        </Link>
                        
                     </div>
                     <div className= 'list'>
                         <p className= 'title'>管理员</p>
                                    <li>
                                        <img className= 'tag-img' alt= '' src= "//upload.jianshu.io/users/upload_avatars/259/5210859b-fc54-4cf8-908f-830f0237926a.png?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" />
                                        <Link to= '/' className= 'title-name'>简书</Link>
                                        <span className= 'tag'>创建者</span>
                                    </li>
                         {
                             load2? 
                                <ul> 
                                  {
                                    list.map((item, index) => {
                                        return (
                                                <li key= {index}>
                                                <img className= 'tag-img' alt= '' src= {item.get('urlImg')} />
                                                <Link to= '/' className= 'title-name'>{item.get('name')}</Link>
                                                </li>
                                        )
                                    })
                                  }
                                  <div className= 'open1' onClick= { handleCloseClick } >收起<Icon type="up" theme="outlined" /></div>
                                </ul>
                                
                                :
                                <ul>
                                  {
                                    list2.map((item, index) => {
                                        return (
                                                <li key= {index}>
                                                <img className= 'tag-img' alt= '' src= {item.get('urlImg')} />
                                                <Link to= '/' className= 'title-name'>{item.get('name')}</Link>
                                                </li>
                                           )
                                    })
                                  }
                                  <div className= 'open1' onClick= { handleOpenClick } >展开<Icon type="down" theme="outlined" /></div>
                                </ul>
                                
                                
                         }
                     </div>
                     <div className= 'writer'>
                        <div onClick= { handleModal } className= 'focus-name'>推荐作者(30) <Icon type="question-circle" theme="filled" /></div>
                         {
                             writerList.map((item, index) => {
                                 return (
                                    <img key= {index} className= 'writer-img' src= {item.get('urlImg')} alt= ''/>
                                 )
                             })
                         }
                         <span className= 'func-btn'>
                            <Icon  type="ellipsis" theme="outlined" />
                         </span>
                     </div>
                     <div className= 'focus'>
                         <div className= 'focus-name'>关注的人(1345450) <Icon type="question-circle" theme="filled" /></div>
                         {
                             focusList.map((item, index) => {
                                 return (
                                    <img key= {index} className= 'focus-img' src= {item.get('urlImg')} alt= ''/>
                                 )
                             })
                         }
                         <span className= 'func-btn'>
                            <Icon  type="ellipsis" theme="outlined" />
                         </span>
                     </div>
                  </RemmendRight>
                  <BackTop></BackTop> 
               </RemmendWrapper>
            </Fragment>
        )
    }
}
const mapState = (state) => {
    return {
        title: state.getIn(['remmend', 'title']),
        nav: state.getIn(['remmend', 'nav']),
        notice1: state.getIn(['remmend', 'notice1']),
        notice2: state.getIn(['remmend', 'notice2']),
        list: state.getIn(['remmend', 'list']),
        list2: state.getIn(['remmend', 'list2']),
        writerList: state.getIn(['remmend', 'writerList']),
        focusList: state.getIn(['remmend', 'focusList']),
        load: state.getIn(['remmend', 'Loading']),
        load2: state.getIn(['remmend', 'Loading2'])
    }
 }
 const mapDispatch = (dispatch) => {
    return {
        handleClose(){
          dispatch(actionCreater.loadClose())
        },
        handleOpen(){
            dispatch(actionCreater.loadOpen())
        },
        handleCloseClick(){
            dispatch(actionCreater.load2Close())
          },
        handleOpenClick(){
            dispatch(actionCreater.load2Open())
         },
         handleModal(){
             dispatch(actionCreater.helpHint())
         },
         getRemendData(){
             dispatch(actionCreater.getData())
         }

    }
 }
export default connect(mapState, mapDispatch)(Remmend);